<template>
  <div div class="main-container">
    <MainLayout>
      <template #header>
        <div style="width: 300px">
          <SelectVin :form-data="page.searchForm.vin" @handleChanage="handleChanage" />
        </div>
      </template>
      <template #default>
        <el-table :data="tableData" height="100%" border>
          <el-table-column prop="vin" label="VIN" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ scope.row.vin || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="modelName" label="车型" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ scope.row.modelName || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="carColor" label="颜色" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ scope.row.carColor || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="source" label="Call车类型" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ filterName(scope.row.source) }}
            </template>
          </el-table-column>
          <el-table-column prop="callTime" label="Call车日期" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ scope.row.callTime || '--' }}
            </template>
          </el-table-column>

          <el-table-column prop="callPrice" label="Call车费用" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ splitThousandSeparator(scope.row.callPrice) }}
            </template>
          </el-table-column>

          <el-table-column prop="bond" label="Call车保证金" show-overflow-tooltip min-width="110px">
            <template #default="scope">
              {{ splitThousandSeparator(scope.row.bond) }}
            </template>
          </el-table-column>
          <el-table-column prop="returnFee" label="建店后返" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ splitThousandSeparator(scope.row.returnFee) }}
            </template>
          </el-table-column>
          <el-table-column prop="rewardFee" label="单台批售奖励" show-overflow-tooltip min-width="110px">
            <template #default="scope">
              {{ splitThousandSeparator(scope.row.rewardFee) }}
            </template>
          </el-table-column>

          <el-table-column prop="payMoney" label="Call车尾款" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ splitThousandSeparator(scope.row.payMoney) }}
            </template>
          </el-table-column>
          <el-table-column prop="payMoneyTime" label="尾款结算日期" show-overflow-tooltip min-width="110px">
            <template #default="scope">
              {{ scope.row.payMoneyTime || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="payInterest" label="支付利息" show-overflow-tooltip min-width="100px">
            <template #default="scope">
              {{ splitThousandSeparator(scope.row.payInterest) }}
            </template>
          </el-table-column>

          <el-table-column prop="updateUname" label="操作人" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.updateUname || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="statusName" label="单车状态" min-width="100px">
            <template #default="scope">
              <span :class="['circle', scope.row.status == 1 ? 'circle-green' : 'circle-red']">{{
                scope.row.statusName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" fixed="right" label="操作" width="170px">
            <template #default="scope">
              <ElButton
                v-if="[0].includes(scope.row.status) && [1].includes(scope.row.source)"
                link
                type="primary"
                @click="handleSettle(scope.row)"
                >单车结算</ElButton
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <el-pagination
          v-model:currentPage="page.pageNum"
          v-model:page-size="page.pageSize"
          :page-sizes="page.pageSizes"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="page.handleSizeChange"
          @current-change="page.handleCurrentChange"
        />
      </template>
    </MainLayout>
    <SettleDialog ref="SettleRef" @handleRefresh="getTableData(1)" />
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import MainLayout from '@/components/MainLayout/index.vue';
import SelectVin from '@/components/SelectVin/index.vue';
import usePageData from '@/hooks/usePageData';
import SettleDialog from './SettleDialog.vue';
import { carPageListApi } from '@/api/common';
import { filterName, splitThousandSeparator } from '@/utils';

const route = useRoute();

const { tableData, page, getTableData } = usePageData(carPageListApi, false);
page.searchForm = { callId: route.query.id };

onMounted(() => {
  getTableData();
});

const handleChanage = (val: any) => {
  page.searchForm.vin = val;
  getTableData(1);
};

// 结算
const SettleRef = ref<any>();
const handleSettle = (row: any) => {
  SettleRef.value.handleOpen(row);
};
</script>

<style scoped></style>
